<template>
  <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
  <div id="main" style="width: 100%;height:300px;"></div
></template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'LeftTable-1',
  data() {
    return {}
  },
  mounted() {
    this.showPie()
  },
  methods: {
    showPie() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('main'), 'dark')
      let option
      // 指定图表的配置项和数据
      option = {
        tooltip: {
          trigger: 'item'
        },

        //legend: {
        //  orient: 'vertical',
        //  left: 'left'
        //},
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            //label: {
            //  show: false
            //},
            data: [
              { value: 110.3, name: '教育文化和娱乐类' },
              { value: 103.5, name: '衣着类' },
              { value: 102.1, name: '居住类' },
              { value: 105.6, name: '交通通信类' },
              { value: 109.3, name: '生活用品及服务类' },
              { value: 107.2, name: '食品类' },
              { value: 103.5, name: '医疗类' },
              { value: 104.3, name: '其他用品及服务类' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表。
      option && myChart.setOption(option)
    }
  }
}
</script>
<style scoped lang="scss"></style>
